<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>

<body>

    <canvas id="myCanvas" width="400" height="400" style="border:1px solid #d3d3d3;"></canvas>
    <div>123123</div>

    <script>
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        function Line(x1, y1, x2, y2) {
            this.x1 = x1;
            this.y1 = y1;
            this.x2 = x2;
            this.y2 = y2;
        }
        Line.prototype.drawWithArrowheads = function (ctx) {

            // arbitrary styling
            ctx.strokeStyle = "blue";
            ctx.fillStyle = "blue";
            ctx.lineWidth = 1;

            // draw the line
            ctx.beginPath();
            ctx.moveTo(this.x1, this.y1);
            ctx.lineTo(this.x2, this.y2);
            ctx.stroke();

            // draw the starting arrowhead
            var startRadians = Math.atan((this.y2 - this.y1) / (this.x2 - this.x1));
            startRadians += ((this.x2 > this.x1) ? -90 : 90) * Math.PI / 180;
            // this.drawArrowhead(ctx, this.x1, this.y1, startRadians);
            // draw the ending arrowhead
            var endRadians = Math.atan((this.y2 - this.y1) / (this.x2 - this.x1));
            endRadians += ((this.x2 > this.x1) ? 90 : -90) * Math.PI / 180;
            this.drawArrowhead(ctx, this.x2, this.y2, endRadians);

        }
        Line.prototype.drawArrowhead = function (ctx, x, y, radians) {
            console.log(x, y, radians);
            ctx.save();
            ctx.beginPath();
            ctx.translate(x, y);
            ctx.rotate(radians);
            ctx.moveTo(0, 0);
            ctx.lineTo(5, 20);
            ctx.lineTo(-5, 20);
            ctx.closePath();
            ctx.restore();
            ctx.fill();
        }

        // create a new line object
        var line = new Line(50, 350, 350, 350);
        var line2 = new Line(50, 350, 51, 50);
        // draw the line
        line.drawWithArrowheads(context);
        line2.drawWithArrowheads(context);
    </script>

</body>

</html>